<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="../images/yc.png" type="image/x-icon">
<link rel="stylesheet" href="../css/layui.css" media="all">
<style type="text/css">
  .layui-table-cell {
	height:100px;
	line-height:100px;
	padding:0 15px;
	position:relative;
	box-sizing:border-box
}
</style>
</head>
<body>
<br />

<div class="demoTable">
<form id="myform">
	<span class="navy_padding">发布者ID</span>
    <div class="layui-inline">
      <input class="layui-input" name="gno"  autocomplete="off" id="findByMno">
    </div>
   	<span class="navy_padding">标题</span>
    <div class="layui-input-inline">
       <input type="text" name="gname" autocomplete="off" class="layui-input" id="findByTitle">
	</div>
    <button type="button" class="layui-btn layui-btn-radius" onclick="search()"> 查询  </button>
    </form>
</div>

<table class="layui-hide" id="admin_data" lay-filter="test"></table>
<!--  -->
<script type="text/html" id="checkboxTpl">
	<a class="layui-btn layui-btn-xs" lay-event="edit">修改标题</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs layui-btn-xs" lay-event="go">传送</a> 
</script>
<!-- 
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script> -->
<script src="../js/jquery-3.4.1.min.js"></script>
<!--  
<script type="text/html" id="checkboxTpl">
  <input type="checkbox" name="lock" value="{{d.pno}}" title="下架" lay-filter="lockDemo" {{ d.status == 2 ? 'checked' : '' }}>
</script>-->

<script src="../js/layui.all.js" charset="utf-8"></script>
<script src="../js/ajaxfileupload.js" charset="utf-8"></script>
<script src="../js/show-dialog.js" charset="utf-8"></script>

<script>
layui.use('table', function(){
	var table = layui.table, form = layui.form;
	table.render({
    	elem: '#admin_data',
		url:'../../post/lists',
		//toolbar: 'toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
		limit:10,
    	limits:[10,20,50,100],
    	title: '管理员信息表',
    	cellMinWidth: 120,
    	id: "admin_data",
    	method:"GET",
	    cols: [[
	    	/*{
			type: 'checkbox', fixed: 'center'},*/
	      	{field:'pno', title:'编号',width:'10%',fixed: 'center', unresize: true, sort: true, align: 'center'},
	      	{field:'mno', title:'发布人ID',width:'10%', align: 'center'},
			{field:'tname', title:'类别', width:'10%',align: 'center'},
			{field:'title', title:'标题',width:'20%', align: 'center'},
			{field:'time', title:'发布时间',width:'20%' ,align: 'center', sort: true},
			{field:'photo', title:'图片',width:'15%',align: 'center',sort:false,
                templet:function (d) {
                	let pic = "../../../" + d.pics.split(";")[0];
                	let photo = "../../../" + d.photo;
                	if(d.photo == null || d.photo == ""){
                		return '<div οnclick="showPic(this,'+ d.pno +','+ d.tno +')"><a onclick="showPic(this,'+ d.pno +','+ d.tno +')"><img src='+pic+' style="width:100px;height:100px" οnclick="showPic(this,'+ d.pno +','+ d.tno +')"></a></div>'
                	}
                	return '<div οnclick="showPic(this,'+ d.pno +','+ d.tno +')"><a onclick="showPic(this,'+ d.pno +','+ d.tno +')"><img src='+photo+' style="width:100px;height:100px" οnclick="showPic(this,'+ d.pno +','+ d.tno +')"></a></div>'
                    
                }
			},
			{field:'status', title:'操作', width:'15%', templet: '#checkboxTpl', align: 'center',unresize: true}
	    ]],
		page: { 
		  layout: ['prev', 'page', 'next', 'count', 'skip', 'limit'], //自定义分页布局
	      //,curr: 5 // 设定初始在第 5 页
	      groups: 5, // 只显示 1 个连续页码
	      first: '首页', //不显示首页
	      last: '尾页' //不显示尾页
	      
	    }
	});
	
	//监听锁定操作
	form.on('checkbox(lockDemo)', function(obj){
		layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
	});
	
	//图片放大展示
	$("#pic").click(function(){
		console.log("a")
	})
  
	// 头工具栏事件
	table.on('toolbar(test)', function(obj){
		var checkStatus = table.checkStatus(obj.config.id), data = checkStatus.data; //获取选中的数据;
    	switch(obj.event){
	    	case 'add':
	            layer.msg('添加');
	          break;
	          case 'update':
	            if(data.length === 0){
	              layer.msg('请选择一行');
	            } else if(data.length > 1){
	              layer.msg('只能同时编辑一个');
	            } else {
	              layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
	            }
	          break;
	          case 'delete':
	            if(data.length === 0){
	              layer.msg('请选择您要删除的数据...', {icon:5,offset:"auto",time:2000});
	            } else {
	            	layer.confirm('数据一旦删除将不能恢复，您确定要删除吗？',{icon: 3, title: "确认"}, function(index){
	            		var arrs = [];
	            		for (var i = 0; i < data.length; i ++) {
	            			arrs.push(data[i].id);
	            		}
	            		console.info(arrs);
	            		layer.close(index);
	            		table.reload('admin_data',  // table id
	            				{ 
	            					where: { id: 1, status: 2 }, // 参数
	                         		page: {
	                                   curr: 1 // 重新从第 1 页开始
	                         		}
	                      });
	    			});
	            }
	          break;
		};
	});
  
	// 监听行工具事件
	table.on('tool', function(obj){
    	var data = obj.data;
    	let newName = '';
    	if(obj.event === 'del'){
      		layer.confirm('数据一旦删除将不能恢复，您确定要删除吗？', function(index){
        		obj.del();
        		layer.close(index);
			});
    	} else if(obj.event === 'edit'){
    		layer.prompt({
      			title:'修改标题',
        		formType: 3,
        		value: newName
      		}, function(value, index){
				obj.update({
					newName: value
        		});
				this.newName = value;
				console.log(this.newName,obj.data.pno)
				// 更新商品类型名
        		$.post("../../post/updatePostTitle",{title:this.newName,pno:obj.data.pno},rt=>{
        			if(rt == 1){
        				obj.data.tname = this.newName;
        				layer.msg("修改成功...",{icon:1,time:2000});
        				layui.table.reload("admin_data");   //重新加载表格数据
        			}else{
        				layer.msg("修改失败,请稍后再试...",{icon:2,time:2000});
        				layui.table.reload("admin_data");   //重新加载表格数据
        			}
        		},"json");
        		layer.close(index);
      		});
		}else if(obj.event === 'go'){
			sessionStorage.setItem("pno",obj.data.pno);
			location.href="change.html";
		}
	});

});

function showPic(t,pno,tno) {
    var t = $(t).find("img");
    console.log($(t).attr('src'))
    if(t == null||t == ''){
        return;
    }
    layer.open({
        type: 1,
        skin: 'layui-layer-rim', //加上边框
        area: ['75%', '85%'], //宽高
        shadeClose: true, //开启遮罩关闭
        end: function (index, layero) {
            return false;
        },
        content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '"  style="width:75%;height:80%" /></div><div style="margin-left:550px"><span style="color:red;width:30px">更换图片</span><input type="file" name="photoC" id="photoC"><button onclick="change('+ pno +','+ tno +')">保存</button></div>'
    });
}

function change(pno,tno){
	console.log(pno,tno)
	let fileList = document.getElementById("photoC").files;
	if(fileList.length <= 0){
		layer.msg("请选择图片...");
		return;
	}
	console.log(fileList)
	$.ajaxFileUpload({
		url:"../../post/updateImage",
		secureuri:false,
		fileElementId:"photoC",
		data:{pno:pno,tno:tno},
		dataType:"json",
		success:function(rt,status){
			if(rt.code == 700){
				showMsg("虽然我不知道你怎么进来的,但是请先登录","red",function(){
					location.href="../login.html"
				})
			}
			
			if(rt.code == 200){
				$("#myform")[0].reset();   //重置表单
				$("#showpic").html("");  //清空图片预览
				layer.msg("修改图片成功...",{icon:1,time:2000});
				layui.table.reload("admin_data");   //重新加载表格数据
				return;
			}
			layer.msg("修改图片失败...",{icon:2,time:2000});
		},
		error:function(rt,status,e){
			layer.msg("修改图片失败\n" + e,{icon:2,time:2000})
		}
	});
}

function search(){
	layui.use('table', function(){
		var table = layui.table, form = layui.form;
		table.render({
	    	elem: '#admin_data',
			url:'../../post/findOne',
			toolbar: 'toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
	    	title: '管理员信息表',
	    	cellMinWidth: 120,
	    	id: "admin_data",
	    	limit:5,
	    	limits:[10,20,50,100],
	    	where:{
				"mno":$("#findByMno").val(),
				"title":$("#findByTitle").val()
			},
	    	method:"POST",
		    cols: [[
		      {
				type: 'checkbox', fixed: 'center'},
		      	{field:'pno', title:'编号',width:'10%',fixed: 'center', unresize: true, sort: true, align: 'center'},
		      	{field:'mno', title:'发布人ID',width:'10%', align: 'center'},
				{field:'tname', title:'类别', width:'10%',align: 'center'},
				{field:'title', title:'标题',width:'20%', align: 'center',edit: 'text'},
				{field:'time', title:'发布时间',width:'20%' ,align: 'center', sort: true},
				{field:'photo', title:'图片',width:'15%',align: 'center',sort:false,
	                templet:function (d) {
	                	let pic = "../../../" + d.pics.split(";")[0];
	                	let photo = "../../../" + d.photo;
	                	if(d.photo == null || d.photo == ""){
	                		return '<div οnclick="showPic(this,'+ d.pno +','+ d.tno +')"><a onclick="showPic(this,'+ d.pno +','+ d.tno +')"><img src='+pic+' style="width:100px;height:100px" οnclick="showPic(this,'+ d.pno +','+ d.tno +')"></a></div>'
	                	}
	                	return '<div οnclick="showPic(this,'+ d.pno +','+ d.tno +')"><a onclick="showPic(this,'+ d.pno +','+ d.tno +')"><img src='+photo+' style="width:100px;height:100px" οnclick="showPic(this,'+ d.pno +','+ d.tno +')"></a></div>'
	                    
	                }
				},
				{field:'status', title:'操作', width:'15%', templet: '#checkboxTpl', align: 'center',unresize: true}
		    ]],
			page: { 
				layout: ['prev', 'page', 'next', 'count', 'skip', 'limit'], //自定义分页布局
		      //,curr: 5 // 设定初始在第 5 页
		      groups: 10, // 只显示 1 个连续页码
		      first: '首页', //不显示首页
		      last: '尾页' //不显示尾页
		      
		    }
		});
		
		//监听锁定操作
		form.on('checkbox(lockDemo)', function(obj){
			layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
		});
		
		//图片放大展示
		$("#pic").click(function(){
			console.log("a")
		})
	  
		// 头工具栏事件
		table.on('toolbar(test)', function(obj){
			var checkStatus = table.checkStatus(obj.config.id), data = checkStatus.data; //获取选中的数据;
	    	switch(obj.event){
		    	case 'add':
		            layer.msg('添加');
		          break;
		          case 'update':
		            if(data.length === 0){
		              layer.msg('请选择一行');
		            } else if(data.length > 1){
		              layer.msg('只能同时编辑一个');
		            } else {
		              layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
		            }
		          break;
		          case 'delete':
		            if(data.length === 0){
		              layer.msg('请选择您要删除的数据...', {icon:5,offset:"auto",time:2000});
		            } else {
		            	layer.confirm('数据一旦删除将不能恢复，您确定要删除吗？',{icon: 3, title: "确认"}, function(index){
		            		var arrs = [];
		            		for (var i = 0; i < data.length; i ++) {
		            			arrs.push(data[i].id);
		            		}
		            		console.info(arrs);
		            		layer.close(index);
		            		table.reload('admin_data',  // table id
		            				{ 
		            					where: { id: 1, status: 2 }, // 参数
		                         		page: {
		                                   curr: 1 // 重新从第 1 页开始
		                         		}
		                      });
		    			});
		            }
		          break;
			};
		});
	  
		// 监听行工具事件
		table.on('tool', function(obj){
	    	var data = obj.data;
	    	let newName = '';
	    	if(obj.event === 'del'){
	      		layer.confirm('数据一旦删除将不能恢复，您确定要删除吗？', function(index){
	        		obj.del();
	        		layer.close(index);
				});
	    	} else if(obj.event === 'edit'){
	    		layer.prompt({
	      			title:'修改标题',
	        		formType: 3,
	        		value: newName
	      		}, function(value, index){
					obj.update({
						newName: value
	        		});
					this.newName = value;
					console.log(this.newName,obj.data.pno)
					// 更新商品类型名
	        		$.post("../../post/updatePostTitle",{title:this.newName,pno:obj.data.pno},rt=>{
	        			if(rt == 1){
	        				obj.data.tname = this.newName;
	        				layer.msg("修改成功...",{icon:1,time:2000});
	        				layui.table.reload("admin_data");   //重新加载表格数据
	        			}else{
	        				layer.msg("修改失败,请稍后再试...",{icon:2,time:2000});
	        				layui.table.reload("admin_data");   //重新加载表格数据
	        			}
	        		},"json");
	        		layer.close(index);
	      		});
			}else if(obj.event === 'go'){
				sessionStorage.setItem("pno",obj.data.pno);
				location.href="change.html";
			}
		});

	});
}
</script>
</body>
</html>